<script setup lang="jsx">
import { ref } from 'vue';
import { Modal as antModal, message } from 'ant-design-vue';
// import { JiSuan1, vcpsendData } from '../../../service/api/vcp';
import { get, post } from '../../../service/api/api';
const selList = ref({
  lotNumber: ''
});
const textareas = ref('');

function inputMethod(event) {
  console.log(event);

  // 在这里编写按下回车键时要执行的逻辑f
  if (event.length === 13) {
    get('/mes/TTST/getlotNumber', selList.value).then(({ error, data }) => {
      if (!error) {
        console.log(data);

        textareas.value = JSON.stringify(data, null, 2);
      }
    });
  } else {
    // message.error('请输入正确的料号查询!', 10);
    window.$message?.error('请输入正确的料号查询!');
  }
}
const dateTime = ref('');
function updateClock() {
  const now = new Date();

  // 格式化日期和时间
  const year = now.getFullYear();
  const month = `0${now.getMonth() + 1}`.slice(-2); // 月份是从0开始的，所以要加1
  const day = `0${now.getDate()}`.slice(-2);
  const hours = `0${now.getHours()}`.slice(-2);
  const minutes = `0${now.getMinutes()}`.slice(-2);
  const seconds = `0${now.getSeconds()}`.slice(-2);

  // 拼接完整的日期和时间字符串
  const dateTimeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  dateTime.value = dateTimeString;
  // 更新页面上显示的时间
}

// 设置定时器，每1000毫秒（即1秒）更新一次时间
setInterval(updateClock, 1000);

// 初始调用一次以确保页面加载时即显示时间
updateClock();
function search() {
  if (textareas.value) {
    antModal.confirm({
      title: `是否确认下发参数吗?`,
      onOk: () => {
        const arr = JSON.parse(textareas.value);

        post('/mes/TTST/insert', arr).then(({ error, data, otherData }) => {
          if (!error) {
            textareas.value = [];
            selList.value.lotNumber = '';
            window.$message?.success('下发成功!');
          }
        });
      },
      onCancel: () => {}
    });
  } else {
    window.$message?.error('请先查询料号再确定下发!');
  }
}
function reset() {
  textareas.value = '';
}
</script>

<template>
  <div class="bodyClass">
    <div class="titClass">
      <span class="ml-10px">参数下发TTST裁磨线</span>
      <p>{{ dateTime }}</p>
    </div>
    <div class="mt20px">
      <AForm
        :model="selList"
        :label-col="{
          span: 5,
          md: 7
        }"
      >
        <ARow :gutter="[15, 8]" wrap justify="center">
          <!--
 <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
            <AFormItem label="制程线" name="gongxu" class="m-0" :label-col="{}">
              <ASelect v-model:value="selList.gongxu" placeholder="请选择打码状态" allow-clear>
                <ASelectOption value="沉铜">沉铜</ASelectOption>
                <ASelectOption value="黑影">黑影</ASelectOption>
              </ASelect>
            </AFormItem>
          </ACol>
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
            <AFormItem label="" name="xb" class="m-0" :label-col="{}">
              <ASelect v-model:value="selList.xb" placeholder="请选择线别" allow-clear>
                <ASelectOption value="A">A</ASelectOption>
              </ASelect>
            </AFormItem>
          </ACol>
-->
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
            <AFormItem label="批卡号" name="lotNumber" class="m-0" :label-col="{}">
              <AInput
                v-model:value="selList.lotNumber"
                placeholder="请输入批卡号"
                allow-clear
                autocomplete="off"
                @keypress.enter="inputMethod(selList.lotNumber)"
              />
            </AFormItem>
          </ACol>
        </ARow>
        <ARow wrap class="ml-20px mt-20px">
          <ACol :span="16">
            <AFormItem label="" name="" class="m-0" :label-col="{}">
              <ATextarea
                v-model:value="textareas"
                style="font-size: 16px; font-weight: 600; color: brown"
                placeholder=""
                :rows="28"
              />
            </AFormItem>
          </ACol>
          <ACol :span="8">
            <div class="ml-20px flex">
              <AFormItem class="m-0">
                <div class="w-full flex-y-center justify-end gap-12px">
                  <AButton
                    v-hasAuth="['vcp-parameter-issuance:confirm-delivery']"
                    class="mini-btn"
                    style="height: 40px !important; width: 200px; margin-left: 10px; line-height: 0"
                    @click="search"
                  >
                    <span class="m-auto">确定下发</span>
                  </AButton>
                  <AButton
                    class="mini-btn"
                    style="height: 40px !important; width: 200px; margin-left: 10px; line-height: 0"
                    @click="reset"
                  >
                    <span class="m-auto">清除</span>
                  </AButton>
                </div>
              </AFormItem>
            </div>
          </ACol>
        </ARow>
      </AForm>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bodyClass {
  width: 99%;
  height: 90%;
  border: 1px solid rgb(167, 172, 255);
}
.titClass {
  height: 60px;
  color: #fff;
  font-weight: 500;
  background-color: rgb(167, 172, 255);
  text-align: center;
  font-weight: 800;
  // font-size: 20px;
  line-height: 30px;
}
</style>
